<template>
  <div class="category-articles-page">
    <div class="page-header">
      <h1>
        <i class="fas fa-tag"></i> {{ categoryName }}
      </h1>
      <p>共 {{ totalArticles }} 篇文章</p>
    </div>
    
    <div class="articles-container">
      <!-- 文章列表组件 -->
      <ArticleList
        :articles="articles"
        :loading="loading"
        :users="users"
        :categories="categories"
        empty-message="该分类暂无文章"
        @article-click="handleArticleClick"
        @category-click="goToCategory"
      />
      
      <!-- 分页组件 -->
      <Pagination 
        v-if="articles.length > 0"
        :current-page="currentPage"
        :total-pages="totalPages"
        :max-visible="5"
        :show-jumper="totalPages > 5"
        @page-change="handlePageChange"
      />
    </div>
  </div>
</template>

<script>
import { articleAPI } from '@/api/article'
import { dictAPI } from '@/api/dict'
import { userAPI } from '@/api/user'
import ArticleList from '@/components/ArticleList.vue'
import Pagination from '@/components/Pagination.vue'

export default {
  name: 'CategoryArticles',
  components: {
    ArticleList,
    Pagination
  },
  data() {
    return {
      articles: [],
      categories: [],
      users: [],
      loading: true,
      categoryValue: '',
      // 分页相关数据
      currentPage: 1,
      pageSize: 6,
      totalPages: 0,
      totalArticles: 0
    }
  },
  computed: {
    categoryName() {
      const category = this.categories.find(c => c.dictValue === this.categoryValue)
      return category ? category.dictLabel : '分类'
    }
  },
  watch: {
    '$route.params.categoryValue': {
      immediate: true,
      handler(newValue) {
        console.log('路由参数变化:', newValue)
        this.categoryValue = newValue
        // 重置分页
        this.currentPage = 1
        // 如果分类数据已加载，直接加载文章；否则等待分类加载完成
        if (this.categories.length > 0) {
          this.loadArticles()
        }
      }
    },
    // 监听分类数据变化，确保分类加载完成后重新加载文章
    categories: {
      handler(newCategories) {
        if (newCategories.length > 0 && this.categoryValue) {
          console.log('分类数据加载完成，重新加载文章')
          this.loadArticles()
        }
      }
    }
  },
  async mounted() {
    await this.loadCategories()
    await this.loadUsers()
    // 确保分类加载完成后再加载文章
    this.loadArticles()
  },
  methods: {
    async loadCategories() {
      try {
        const response = await dictAPI.getArticleCategories()
        if (response.data.success) {
          this.categories = response.data.data
        }
      } catch (error) {
        console.error('加载分类失败:', error)
      }
    },
    
    async loadUsers() {
      try {
        const response = await userAPI.getAllUsers()
        if (response.data.success) {
          this.users = response.data.data
        }
      } catch (error) {
        console.error('加载用户失败:', error)
      }
    },
    
    async loadArticles() {
      if (!this.categoryValue) {
        this.loading = false
        return
      }
      
      this.loading = true
      try {
        const response = await articleAPI.getArticlesByCategoryPageWithStats(
          this.categoryValue, 
          this.currentPage, 
          this.pageSize
        )
        if (response.data.success) {
          this.articles = response.data.data
          this.totalPages = response.data.pages
          this.totalArticles = response.data.total
        }
      } catch (error) {
        console.error('加载文章失败:', error)
      } finally {
        this.loading = false
      }
    },
    
    handleArticleClick(article) {
      this.$router.push(`/article/${article.id}`)
    },
    
    goToCategory(categoryValue) {
      // 跳转到分类页面
      this.$router.push(`/category/${categoryValue}`)
    },
    
    
    async handlePageChange(page) {
      this.currentPage = page
      await this.loadArticles()
      // 滚动到页面顶部
      window.scrollTo({ top: 0, behavior: 'smooth' })
    },
    
  }
}
</script>

<style scoped>
.category-articles-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  min-height: calc(100vh - 64px);
}

.page-header {
  text-align: center;
  margin-bottom: 2rem;
  padding: 3rem 0;
  background: 
    linear-gradient(rgba(26, 26, 46, 0.8), rgba(22, 33, 62, 0.8)), 
    url('/images/hero-bg.jpg') center/cover no-repeat;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: white;
  margin: -2rem -2rem 2rem -2rem;
  position: relative;
  box-shadow: 
    0 4px 20px rgba(0, 0, 0, 0.3),
    0 8px 32px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  border: 1px solid rgba(100, 181, 246, 0.2);
  border-radius: 0 0 20px 20px;
}

.page-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(100, 181, 246, 0.1) 0%, rgba(151, 220, 153, 0.1) 100%);
  z-index: 1;
}

.page-header::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(100, 181, 246, 0.1) 0%, transparent 70%);
  animation: float 6s ease-in-out infinite;
  z-index: 1;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-20px) rotate(180deg);
  }
}

.page-header h1 {
  font-size: 3rem;
  background: var(--gradient-rainbow);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  position: relative;
  z-index: 2;
}

.page-header p {
  color: #e0e0e0;
  font-size: 1.3rem;
  font-weight: 300;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  position: relative;
  z-index: 2;
}

.articles-container {
  width: 100%;
}
</style>

